<template>
	<view class=" trading all bgf2">
		<!--  tab-->
		<searchHead goback='goback0' background="#FFF" color='#333' title='资金明细' searchTip=''></searchHead>
		<view class='dynamicBox bgff'>
			<view class="dynamicTab center">
				<view @click="changeTab(1)" :class="tabIndex == 1?'active':''" class="tabItem flex-f1 tx-c">转入</view>
				<view @click="changeTab(2)" :class="tabIndex == 2?'active':''" class="tabItem flex-f1  tx-c">转出</view>
				<view @click="changeTab(3)" :class="tabIndex == 3?'active':''" class="tabItem flex-f1  tx-c">买入</view>
				<view @click="changeTab(4)" :class="tabIndex == 4?'active':''" class="tabItem flex-f1  tx-c">卖出</view>
				<view @click="changeTab(5)" :class="tabIndex == 5?'active':''" class="tabItem flex-f1  tx-c">持仓</view>
			</view>
			<!--
				交易成功：'' 交易失败：cF05A5A
				金额颜色：红色：cEE4343 绿色：c37A037
			-->
			<view class=" content">
				
				<!-- Tab 1  start-->
				<view class="Recharge fo30_wbold" v-if="tabIndex==1">
					<!-- 遍历循环1 开始 -->
					<view class="content_list sp_be" v-for="(item,index) in dataRecharge" :key="index">
						<view>
							<view>
								<text class="spacing17 fo28_wbol c333333">转入</text>
								<text class="fo24_w400">{{item.statusName}}</text>
							</view>
							<view class="fo26_w400 c999999">{{item.atime}}</view>
						</view>
						<view class="fo28_wbol cEE4343">{{item.money}}元</view>
					</view>
					<!-- 遍历循环1 结束 -->
				</view>
				
				<!-- Tab 2  start-->
				<view class="Recharge fo30_wbold" v-if="tabIndex==2">
					<!-- 遍历循环2 开始 -->
					<view class="content_list sp_be" v-for="(item,index) in dataCash" :key="index">
						<view>
							<view>
								<text class="spacing17 fo28_wbol c333333">转出</text>
								<text class="fo24_w400">{{item.statusName}}</text>
							</view>
							<view class="fo26_w400 c999999">{{item.atime}}</view>
						</view>
						<view class="fo28_wbol cEE4343">{{item.money}}元</view>
					</view>
					<!-- 遍历循环2 结束 -->
				</view>
				<!-- Tab 2  end-->
				
				<!-- Tab 3  start-->
				<view class="Recharge fo30_wbold" v-if="tabIndex==3">
					<!-- 遍历循环3 开始 -->
					<view class="content_list sp_be" v-for="(item,index) in dataBuy" :key="index">
						<view>
							<view>
								<text class="spacing17 fo28_wbol c333333">买入-{{item.sname}}</text>
								<text class="fo24_w400">{{item.balance}}股</text>
							</view>
							<view class="fo26_w400 c999999">{{item.atime}}</view>
						</view>
						<view class="fo28_wbol cEE4343">{{(item.balance) * parseFloat(item.smoney).toFixed(2)}}元</view>
					</view>
					<!-- 遍历循环3 结束 -->
				</view>
				<!-- Tab 3  end-->
				
				<!-- Tab 4  start-->
				<view class="Recharge fo30_wbold" v-if="tabIndex==4">
					<!-- 遍历循环4 开始 -->
					<view class="content_list sp_be" v-for="(item,index) in dataSell" :key="index">
						<view>
							<view>
								<text class="spacing17 fo28_wbol c333333">卖出-{{item.sname}}</text>
								<text class="fo24_w400">{{item.balance}}股</text>
							</view>
							<view class="fo26_w400 c999999">{{item.atime}}</view>
						</view>
						<view class="fo28_wbol cEE4343">{{parseFloat(item.profitAndLoss).toFixed(2)}}元</view>
					</view>
					<!-- 遍历循环4 结束 -->
				</view>
				<!-- Tab 4  end-->
				
				<!-- Tab 5  start-->
				<view class="Recharge fo30_wbold" v-if="tabIndex==5">
					<!-- 遍历循环5 开始 -->
					<view class="content_list sp_be" v-for="(item,index) in dataHas" :key="index">
						<view>
							<view>
								<text class="spacing17 fo28_wbol c333333">持有-{{item.sname}}</text>
								<text class="fo24_w400">{{item.balance}}股</text>
							</view>
							<view class="fo26_w400 c999999">{{item.atime}}</view>
						</view>
						<view class="fo28_wbol cEE4343">{{(item.balance) * parseFloat(item.smoney).toFixed(2)}}元</view>
					</view>
					<!-- 遍历循环5 结束 -->
				</view>
				<!-- Tab 5  end-->
				
			</view>
		</view>

		<view style="margin-top: 10px;">
			<u-line color="#e5e5e5" />
		</view>

	</view>
</template>

<script>
	import searchHead from "@/component/searchHead/searchHead.vue"
	export default {
		components: {
			searchHead,
		},
		data() {
			return {
				tabIndex: 1,
				
				dataRecharge: [],
				dataCash: [],
				dataBuy: [],
				dataSell: [],
				dataHas: [],
			};
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index
			},
			// 新增
			// 转入
			getRecharge(){
				this.$Request.get(this.$api.index.getRecharge).then(res => {
					this.dataRecharge = res.data;
				})
			},
			// 转出
			getCash(){
				this.$Request.get(this.$api.index.getCash).then(res => {
					this.dataCash = res.data;
				})
			},
			// 买入订单
			getBuy() {
				this.$Request.get(this.$api.index.getNewBuyByUser).then(res => {
					this.dataBuy = res.data;
				})
			},
			// 卖出订单
			getSell() {
				this.$Request.get(this.$api.index.getSellByUser).then(res => {
					this.dataSell = res.data;
				})
			},
			// 卖出订单
			getHas() {
				this.$Request.get(this.$api.index.getHas).then(res => {
					this.dataHas = res.data;
				})
			},
		},
		onLoad(e) {
			console.log(e)
			this.getRecharge()
			this.getCash()
			this.getBuy()
			this.getSell()
			this.getHas()
		}
	}
</script>

<style lang="scss" scoped>
	@import "./moneyDetail.scss";

	.all {
		background-color: #FFFFFF;
	}
</style>
